
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

    <nav id='nav-style' class="navbar navbar-default navbar-static-top navbar-inverse">
			<div id='navbar-style' class="container">
				<div id="navbar-header-style" class="navbar-header">
			        <button type="button" id="brand-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
          			<a class="navbar-brand" href="#">
        				<img alt="Brand" src="img/logo2.png">
      				</a>
      				<span id="nav-brand" class="navbar-toggle collapsed">
      					<a class="navbar-brand" href="#" >
        					<img alt="Brand" src="img/logo3.png">
      					</a>
      				</span>
        		</div>	
        		<div id="navbar" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbar-brand" >
        					<ul class="nav navbar-nav" style="width: auto; text-align: center;">
					            <li><a href="#Mac">Mac</a></li>
					            <li class="nav-list" ><a href="#Ipad">iPad</a></li>
					            <li class="nav-list" ><a href="#Iphone">iPhone</a></li>
					            <li class="nav-list" ><a href="#nav-list">Watch</a></li>
					            <li class="nav-list" ><a href="#TV">TV</a></li>
					            <li class="nav-list" ><a href="#Music">Music</a></li>
					            <li class="nav-list" ><a href="#Support">Support</a></li>
					            <li class="nav-list" ><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
			         		</ul>	
        				<span class="collapse navbar-collapse" data-toggle = "collapse" data-target = "#brand-toggle">
				        <a id='navbar-buy' class="navbar-brand"  href="#">
		    				<img alt="Brand" src="img/logo3.png">
		  				</a>			          	
			         </span> 
        		</div> 
			</div>
		</nav>
  </body>
</html>

